<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>资产日志</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../js/layer/layui-v2.3.0/layui/css/layui.css">
  <style>
    body{overflow: auto}
    .layui-form{
      padding-top: 50px;
    }
    .app-item{
      display: inline-block;
      position: relative;
      width: 48%;
    }
    .app-date-icon{
      position: absolute;
      right: 8px;
      top: 10px;
    }
    .app-hr{
      display: inline-block;
      width: 80px;
      height: 2px;
      background: #eee;
    }
    .table-wrapper{
      padding:15px;
    }
    .layui-table td, .layui-table th{
      padding: 0;
    }
    .layui-table th{
      color: white;
      font-size: 18px;
    }
    .layui-table td{
      font-size: 16px;
    }
    .layui-table th,.layui-table td{
      text-align: center;
      height: 54px;
    }
    .layui-table thead tr{
      background: -webkit-linear-gradient(left, #e94341, #b50908); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(right, #e94341, #b50908); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(right, #e94341, #b50908); /* Firefox 3.6 - 15 */
      background: linear-gradient(to right, #e94341, #b50908); /* 标准的语法 */
    }
  </style>
</head>
<body>
  <form class="layui-form" action="">
    <!-- 选择框 -->
    <div class="select-group">
      <div class="app-item">
        <div class="layui-form-item">
          <label class="layui-form-label">操作</label>
          <div class="layui-input-block">
            <select name="city" lay-verify="required">
              <option value=""></option>
              <option value="0">全部</option>
              <option value="1">操作1</option>
              <option value="2">操作2</option>
              <option value="3">操作3</option>
              <option value="4">操作4</option>
            </select>
          </div>
        </div>
      </div>
      <div class="app-item">
        <div class="layui-form-item">
          <label class="layui-form-label">操作员</label>
          <div class="layui-input-block">
            <select name="city" lay-verify="required">
              <option value=""></option>
              <option value="0">全部</option>
              <option value="1">操作员1</option>
              <option value="2">操作员2</option>
              <option value="3">操作员3</option>
              <option value="4">操作员4</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <!-- 时间选择 -->
    <div class="date-group">
      <div class="app-item">
        <div class="layui-form-item">
          <label class="layui-form-label">购入时间</label>
          <div class="layui-input-block">
            <input type="text" id="startInput" required  lay-verify="required" placeholder="开始时间" autocomplete="off" class="layui-input">
          </div>
        </div>
        <i class="layui-icon layui-icon-log app-date-icon"></i>  
      </div>
      <div class="app-item">
        <div class="layui-form-item">
          <label class="layui-form-label">
            <span class="app-hr"></span>
          </label>
          <div class="layui-input-block">
            <input type="text" id="endInput" required  lay-verify="required" placeholder="结束时间" autocomplete="off" class="layui-input">
          </div>
        </div>
        <i class="layui-icon layui-icon-log app-date-icon"></i>  
      </div>
    </div>
    <!-- 表格容器 -->
    <div class="table-wrapper">
      <table class="layui-table" lay-even lay-skin="nob">
        <thead>
          <tr>
            <th>日期</th>
            <th>时间</th>
            <th>操作</th>
            <th>操作员</th>
            <th>内容</th>
            <th>操作</th>
          </tr> 
        </thead>
        <tbody>
          <tr>
            <td>2018-05-10</td>
            <td>10：11：35</td>
            <td>发放</td>
            <td>张三</td>
            <td>发放至李四</td>
            <td>
              <button onclick="showDetail()" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-primary">详情</button>
            </td>
          </tr>
          <tr>
            <td>2018-05-10</td>
            <td>17：12：21</td>
            <td>回收</td>
            <td>张三</td>
            <td>回收至信息化备库</td>
            <td>
              <button onclick="showDetail()" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-primary">详情</button>
            </td>
          </tr>
          <tr>
            <td>2018-05-10</td>
            <td>09：46：51</td>
            <td>调剂</td>
            <td>张三</td>
            <td>调解至王五</td>
            <td>
              <button onclick="showDetail()" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-primary">详情</button>
            </td>
          </tr>
          <tr>
            <td>2018-05-11</td>
            <td>14：49：00</td>
            <td>维修</td>
            <td>王五</td>
            <td>开始维修</td>
            <td>
              <button onclick="showDetail()" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-primary">详情</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </form>
  <script src="../js/jquery/jquery.min.js"></script>
  <script src="../js/layer/layui-v2.3.0/layui/layui.all.js"></script>
  <script>
    // 使用layui组件
    layui.use(['laydate', 'layer'], function(){
      var laydate = layui.laydate;
      layer = layui.layer;
      //执行一个laydate实例
      laydate.render({
        elem: '#startInput' //指定元素
      });
      laydate.render({
        elem: '#endInput' //指定元素
      });
    });
  </script>
</body>
</html>